<!DOCTYPE html>
<!-- saved from url=(0046)http://app.test.gjgj.com/checkVideoShare/519/1 -->
<html><head>
        
        <meta charset="UTF-8">
        <title></title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <meta name="format-detection" content="telephone=no" />
        <link rel="icon" href="data:;base64,=">
        <link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/1.9.9/skins/default/index.css" />
        <script type="text/javascript" src="//g.alicdn.com/de/prismplayer/1.9.9/prism-min.js"></script>

    
    <style>
        body{
            width:800px;
            margin:0 auto;
            position:relative;
        }
        .prism-player{
            widith:100%;
            margin-top:20%;
        }
        .img{
            position:absolute;
            top:0;
            left:0;
            right:0;
            bottom:50px;
			max-height:350px;
        }
        .img img{width:100%;height: 100%;}
		.video-list{margin:20px 0;}
		.video-list span{padding:5px 20px;margin-right:20px;border: 1px solid #ddd;border-radius: 2px;cursor:pointer;}
		.video-list span.active{color:#fd8348;}
        .video-list span {
            display: inline-block;
            padding: 5px 20px;
            margin-right: 20px;
            border: 1px solid #ddd;
            border-radius: 2px;
            cursor: pointer;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
        <div class="prism-player" id="J_prismPlayer" style="width: 100%; height: 389.8px;">
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="100%" height="100%" id="prism-player-47896F3E-84D1-47DA-A29B-0E0CB1087EF7">
                <param name="movie" value="//g.alicdn.com/de/prismplayer-flash/1.5.7/PrismPlayer.swf">
                <param name="quality" value="High">
                <param name="FlashVars" value="autoPlay=0&amp;isInner=0&amp;actRequest=1&amp;vid=undefined&amp;domain=//tv.taobao.com&amp;statisticService=https://videocloud.cn-hangzhou.log.aliyuncs.com/logstores/newplayer/track&amp;videoInfoService=/player/json/getBaseVideoInfo.do&amp;disablePing=0&amp;namespace=prism-player-47896F3E-84D1-47DA-A29B-0E0CB1087EF7&amp;barMode=1&amp;isLive=0&amp;waterMark=&amp;environment=undefined&amp;vurl=http%3A%2F%2Fplaytv3.houw.com%2FAct-ss-m3u8-hd%2Fall%2Fmp4%2F2017-09%2FJjDZFjyt7t.m3u8&amp;plugins=&amp;snapShotShow=0&amp;accessId=&amp;accessKey=&amp;apiKey=&amp;flashApiKey=&amp;disableSeek=0&amp;disableFullScreen=0&amp;stsToken=&amp;domainRegion=&amp;authInfo=&amp;playDomain=&amp;stretcherZoomType=&amp;playauth=&amp;prismType=0&amp;formats=&amp;notShowTips=0&amp;showBarTime=5000&amp;showBuffer=1&amp;rePlay=0&amp;encryp=&amp;secret=&amp;cover=http://img1.houw.com/News/2017-09/cspMTFQTxH.jpg">
                <param name="WMode" value="opaque">
                <param name="AllowScriptAccess" value="always">
                <param name="AllowFullScreen" value="true">
                <param name="AllowFullScreenInteractive" value="true">
                <embed name="prism-player-47896F3E-84D1-47DA-A29B-0E0CB1087EF7" src="//g.alicdn.com/de/prismplayer-flash/1.5.7/PrismPlayer.swf" quality="high" pluginspage="//www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100%" height="100%" allowscriptaccess="always" allowfullscreen="true" allowfullscreeninteractive="true" wmode="opaque" flashvars="autoPlay=0&amp;isInner=0&amp;actRequest=1&amp;vid=undefined&amp;domain=//tv.taobao.com&amp;statisticService=https://videocloud.cn-hangzhou.log.aliyuncs.com/logstores/newplayer/track&amp;videoInfoService=/player/json/getBaseVideoInfo.do&amp;disablePing=0&amp;namespace=prism-player-47896F3E-84D1-47DA-A29B-0E0CB1087EF7&amp;barMode=1&amp;isLive=0&amp;waterMark=&amp;environment=undefined&amp;vurl=http%3A%2F%2Fplaytv3.houw.com%2FAct-ss-m3u8-hd%2Fall%2Fmp4%2F2017-09%2FJjDZFjyt7t.m3u8&amp;plugins=&amp;snapShotShow=0&amp;accessId=&amp;accessKey=&amp;apiKey=&amp;flashApiKey=&amp;disableSeek=0&amp;disableFullScreen=0&amp;stsToken=&amp;domainRegion=&amp;authInfo=&amp;playDomain=&amp;stretcherZoomType=&amp;playauth=&amp;prismType=0&amp;formats=&amp;notShowTips=0&amp;showBarTime=5000&amp;showBuffer=1&amp;rePlay=0&amp;encryp=&amp;secret=&amp;cover=http://img1.houw.com/News/2017-09/cspMTFQTxH.jpg">
            </object>
        </div>
    <div class="img" id="img">
        <img src="{{videoList['thumb']}}" width="500" height="300">
    </div>

	<!--录播视频显示下面元素-->
	<div class="video-list" id="videoList">
        {% if videoList['subsectionVideo'] %}
            {% for key,video in videoList['subsectionVideo'] %}

                {% if key == 0 %}
                    <span class="active" data-url="{{video['videoUrl']}}">{{video['title']}}</span>
                {% else %}
                    <span class="" data-url="{{video['videoUrl']}}">{{video['title']}}</span>
                {% endif %}

            {% endfor %}
        {% endif %}
    </div>
        <input type="hidden" id="defaultVideo" value="{{videoList['subsectionVideo'][0]['videoUrl']}}">
        <input type="hidden" id="defaultThumb" value="{{videoList['subsectionVideo'][0]['thumb']}}">
    <script>
   var url = document.getElementById("defaultVideo").value;//如果是录播视频，这是第一条视频的url
   //var cover = document.getElementById("defaultThumb").value;
   var player = new prismplayer({
       id: "J_prismPlayer",
       autoplay: false,
       isLive: false,
       playsinline: true,
       width: "100%",
       height: "40%",
       controlBarVisibility: "always",
       useH5Prism: false,
       useFlashPrism: true,
       source: url,
   });
   player.on('play', function (e) {
       document.getElementById("img").style.display = "none";
   });
   document.getElementById("videoList").addEventListener("click",function(e){
	if(e.target.nodeName=="SPAN"){
		if(e.target.className=="active") return;
		var newurl=e.target.dataset.url;
		document.getElementsByClassName("active")[0].className="";
		e.target.className="active";
		player.loadByUrl(newurl);
	}
   });
   document.getElementById("img").addEventListener("click",function(e){
	player.play();
   });
    </script>

</body></html>